import React, {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as todoActions from '../store/actions/todo.actions'
import {getIn} from 'immutable'

class Footer extends Component{
  todoClear = ()=>{
    if(window.confirm('确认清空已完成?')){
      this.props.clear_todo_completed()
    }
  }
  render(){
    // 过滤未选中的任务，统计数量
    let taskLen = this.props.todos.filter(todo=>!todo.isCompleted).length
    return (
      <footer className={'footer'}>
        <span className={'todo-count'}>
          <strong>{taskLen}</strong> item left
        </span>
        <ul className={'filters'}>
          <li>
            <span onClick={()=>{this.props.modify_todo_filter('all')}}>All</span>
          </li>
          <li>
            <span onClick={()=>{this.props.modify_todo_filter('active')}}>Active</span>
          </li>
          <li>
            <span onClick={()=>{this.props.modify_todo_filter('completed')}}>completed</span>
          </li>
        </ul>
        <button className={'clear-completed'} onClick={this.todoClear}>Clear completed</button>
      </footer>
    )
  } 
}

// 获取store中的数据
const mapStateToProps = (state)=>({
  todos:getIn(state.todoReducer,['todos']),
  filter:getIn(state.todoReducer,['filter'])
})

const mapDispatchToProps = (dispatch)=>({
  ...bindActionCreators(todoActions,dispatch)
}) 


export default connect(mapStateToProps,mapDispatchToProps)(Footer)